<template>
	<view class="icon-list">
		<block v-for="(item,index) in list" :key="index">

			<view class="icon-list-item">
				<view @click="select(item.id)">
					<block v-if="item.selectedIcon || item.icon">
						<uni-icons :type="item.isSelected ? item.selectedIcon : item.icon" size="28"
							:color="item.isSelected ? item.selectedColor : item.color" class="icon">
						</uni-icons>
					</block>
					
					<block v-if="item.custom || item.selectedCustom">
						<uni-icons custom-prefix="iconfont" 
						:type="item.isSelected ? item.selectedCustom : item.custom" size="28"
							:color="item.isSelected ? item.selectedColor : item.color"></uni-icons>
					</block>
					

					<block v-if="item.selectedImg || item.img">
						<image :src="item.isSelected ? item.selectedImg : item.img"
							style="width: 30px;height: 30px;border-radius: 50% 50%;" class="icon"></image>
					</block>

				</view>
				
				<text :style="{color: item.isSelected ? item.selectedColor : item.color,fontSize:'14px'}"
					@click="select(item.id)">{{item.text}}</text>
			</view>


		</block>
	</view>
</template>

<script>
	export default {
		name: "icon-list",
		data() {
			return {

			};
		},
		computed: {

		},
		props: {
			/* {
					img: "",
					selectedIcon: "hand-up-filled",
					icon: "hand-up",
					selectedImg: "",
					text: "点赞",
					selectedColor: "",
					isSelected: false
				}
			 */
			list: {
				default: [],
				type: Array
			}
		},
		methods: {
			select(id) {
				this.$emit("select", id)
			}
		}
	}
</script>

<style scoped>
	.icon-list {
		width: 100%;
		display: flex;
		flex-direction: row;
	}

	.icon-list .icon-list-item {
		flex: 1;
		display: flex;
		padding: 10px 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.icon-list .icon-list-item:active {
		/* background-color: #f0f0f0; */
		transform: scale(1.5);
		transition-duration: 0.5s;

	}

	.icon-list .icon:active {
		transform: scale(1.5);
		transition-duration: 0.3s;
	}
</style>
